import { changeValue, getCityValue, getHoapitalType, getParameters, getdistrictValue, hospitalList } from '@/api/hospitalList/HospitalList';
import { ReqHospitallistList, ReqHospitallistiteam, ReqprovinceList } from '@/api/hospitalList/model/HospitalListType';
import { Button, Card, Form, Input, Select, Table, message } from 'antd'
import { ColumnsType } from 'antd/lib/table';
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';

export default function HospitalList() {
let navigate =   useNavigate()
  const { Option } = Select;
  let [current, setcurrent] = useState<number>(1)
  let [pageSize, setpageSize] = useState<number>(5)
  let [total, settotal] = useState<number>(50)
  let [hospital, setHospital] = useState<ReqHospitallistList>([])
  let [Parameters, setParameters] = useState<ReqprovinceList>([])
  let [city, setcity] = useState<ReqprovinceList>([])
  let [district, setdistrict] = useState<ReqprovinceList>([])
  let [hostype, sethostype] = useState<ReqprovinceList>([])
  // 初始化获取医院列表
  let getHospitalList = async (page = current, limit = pageSize) => {
    let res = await hospitalList({ page, limit })
    setHospital(res.content)
    settotal(res.totalElements)
  }
  // 获取省
  let getParametersValue = async () => {
    let res = await getParameters()
 
    setParameters(res)

  }
  // 获取市
  let getcity = async (value: any) => {
    let cit = await getCityValue(value)
    setcity(cit)
  }
  // 获取区
  let getdistrict = async (value: any) => {
    let dis = await getdistrictValue(value)
    setdistrict(dis)
  }
  // 获取医院等级
  let getHospitalTypeValue = async () => {
    let hos = await getHoapitalType(10000)
    sethostype(hos)
  }
  // 查询医院
  let finish = () => {
  }
  // 上下线操作
  let changeType =  ( id: string,status: number) => {   
     return async ()=>{
      status = status===1?0:1
    await changeValue(status,id)
    message.success("上下线成功")
    getHospitalList()
     }

  }
  // 模拟生命周期
  useEffect(() => {
    getHospitalList()
    getParametersValue()
    getHospitalTypeValue()
  }, [current, pageSize])

  const columns: ColumnsType<any> = [
    {
      align: "center",
      title: '序号',
      render(key, value, index) {
        return index + 1
      }
    },
    {
      align: "center",
      title: '医院logo',
      dataIndex: 'logoData',
      render(text) {
        return <img style={{ width: 100 }} src={`data:image/jpeg;base64,${text}`} alt="" />

      }

    },
    {
      align: "center",
      title: '医院名称',
      dataIndex: 'hosname',

    },
    {
      align: "center",
      title: '等级',
      render(re: ReqHospitallistiteam) {
        return re.param.hostypeString

      }

    },
    {
      align: "center",
      title: '详细地址',
      render(re: ReqHospitallistiteam) {
        return re.param.fullAddress

      }
    },
    {
      align: "center",
      title: '状态',
      dataIndex: 'status',

    },
    {
      align: "center",
      title: '创建时间',
      dataIndex: 'createTime',

    },
    {
      align: "center",
      title: '操作',
      render(row: ReqHospitallistiteam) {
        return <>
          <Button type="primary" onClick={()=>{
            navigate(`/syt/hospital/list/show/${row.id}`)

          }}>查看</Button>
          <Button className='ml' type="primary" onClick={()=>{
            navigate(`/syt/hospital/hospitalset/scheduling/${row.hoscode}`)
          }}>排班</Button>
          {
          row.status===1? <Button type="primary" className='ml'onClick={changeType(row.id,row.status)} danger>下线</Button>: <Button  type="primary" className='ml'onClick={changeType(row.id,row.status)} >上线</Button>
        }
        </>
      }
    },
  ];
  return (
    <Card>
      {/* from表单 */}
      <Form
        onFinish={finish}
        layout="inline"
        name="basic"
      >
        <Form.Item
          name="provinceCode"
        >
          <Select
            onChange={getcity}
            placeholder="请输入省"
            style={{ width: 180 }}
          >
            {Parameters.map((Item) => {
              return <Option key={Item.id} value={Item.id}>{Item.name}</Option>
            })}
          </Select>
        </Form.Item>
        <Form.Item
          name="cityCode"
        >
          <Select
            onChange={getdistrict}
            placeholder="请输入市"
            style={{ width: 180 }}
          >
            {city.map((Item) => {
              return <Option key={Item.id} value={Item.id}>{Item.name}</Option>
            })}

          </Select>
        </Form.Item>
        <Form.Item
          name="districtCode"
        >
          <Select
            placeholder="请输入区"
            style={{ width: 180 }}
          >
            {district.map((Item) => {
              return <Option key={Item.id} value={Item.id}>{Item.name}</Option>
            })}
          </Select>
        </Form.Item>
        <Form.Item
          name="hosname"
        >
          <Input placeholder='请输入医院名称' />
        </Form.Item>

        <Form.Item
          name="hoscode"
        >
          <Input placeholder='请输入医院编码' />
        </Form.Item>
        <Form.Item
          className='mt'
          name="hostype"
        >
          <Select
            placeholder="请输入医院类型"
            style={{ width: 180 }}
          >
            {hostype.map((Item) => {
              return <Option key={Item.id} value={Item.id}>{Item.name}</Option>
            })}

          </Select>
        </Form.Item>
        <Form.Item
          name="status"
        >
          <Select
            placeholder="请输入医院状态"
            style={{ width: 180 }}

          >
            <Option key={1}>已上线</Option>
            <Option key={0}>未上线</Option>
          </Select>
        </Form.Item>
        <Form.Item >
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button className='ml' type="default" >
            清空
          </Button>
        </Form.Item>
      </Form>
      {/* 表格 */}
      <Table
        className='mt'
        rowKey="id"
        bordered
        pagination={{
          total: total,
          pageSize: pageSize,
          current: current,
          pageSizeOptions: [5, 10, 15],
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal(total: number) {
            return <span>总页数为{total}</span>
          }, onChange(page: number, pageSize: number) {
            setcurrent(page)
            setpageSize(pageSize)

          }
        }}
        columns={columns}
        dataSource={hospital}
      />

    </Card>
  )
}
